<template>
	<view class="instock-details-page">
		<view class="title" v-if="stockType != 6">入库信息</view>
		<view class="title" v-if="stockType == 6">出库信息</view>
		<view class="instock-info" v-if="stockType != 6">
			<view class="item c-flex jc-between line" @click="onOpenDialog(1)" v-if="stockType == 8 ">
				<text>出库方</text>
				<text><text>{{stockOut.name||'请选择'}}</text><text class="down-arrow"></text></text>
			</view>
			<view class="item  c-flex jc-between" @click="onOpenDialog(2)">
				<text>收货方</text>
				<text><text>{{stockIn.name||'请选择'}}</text><text class="down-arrow"></text></text>
			</view>
		</view>
		<!-- 配送员出库 -->
		<view class="instock-info" v-if="stockType == 6">
			<view class="item c-flex jc-between line">
				<text>出库方</text>
				<text><text>{{stockOut.name||'请选择'}}</text></text>
			</view>
			<view class="item  c-flex jc-between" >
				<text>收货方</text>
				<text><text>{{stockIn.name||'请选择'}}</text></text>
			</view>
		</view>
		<!-- 产品列表 -->
		<order-table :headers="headers" :list="list" :isEdit="true" @refreshData="onConfirm" ></order-table>
		
		<view class="upload-bt" @click="onScan">扫一扫</view>
		<view class="continue-add-bt" @click="onSubmit">上传</view>
		<!-- 弹框 -->
		<uni-popup ref="type_popup" type="bottom" :custom="true" :mask-click="true"
							 background-color="rgba(0,0,0,0)" style="border-top-left-radius: 50rpx;" :safe-area="false">
			<view class="pop-content">
				<view class="header c-flex jc-between">
					<view @tap='sure(0)'>取消</view>
					<view @tap='sure(1)'>确定</view>
				</view>
				<view class="search-con c-flex jc-start c-item-center">
					<view class="input-con c-flex jc-start c-item-center">
						<image src="@/static/images/common/wb-search.png" style="width: 42rpx;max-height: 42rpx;"></image>
						<input class="uni-input" v-model="searchInfo" name="text" confirm-type="search" 
										placeholder="请输入名称..." @confirm="onInputChange" @input="onInputChange"/>
					</view>
				</view>
				<picker-view :indicator-style="indicatorStyle" :value="popValue" @change="onDataChange" 
										 @pickstart="pickstart" @pickend="pickend" 
										 class="tower_type">
					<picker-view-column >
						<view class="item c-flex c-item-center jc-center" v-for="(item,index) in popList"
							:key="index">
							{{dialogType != 3?item.name:item.label}}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>	
	</view>
</template>

<script>
	import OrderTable from './components/order-table.vue';
	import {STOCK_TYPE} from '@/utils/global.js';
	import {getNameByType} from '@/utils/utils.js';
	export default {
		components:{OrderTable},
		data() {
			return {
				headers:[{name:'产品名称',field:'name'},{name:'已扫数量',field:'count'}],
				stockList:[],
				stockIn:{id:'',name:''},
				stockOut:{id:'',name:''},
				isMoving:false,
				popList:[],
				popIndex:0,
				dialogType:1,
				list:[],
				codes:[],
				stockType:'',
				searchInfo:'',
			};
		},
		onLoad(options) {
			uni.setNavigationBarColor({
				backgroundColor:'#f9ead5',
				frontColor:'#000000'
			});
			uni.setNavigationBarTitle({
				title:getNameByType(STOCK_TYPE,this.$store.getters.stockType)
			});
			this.stockType = this.$store.getters.stockType;
			this.list = [];
			const data = JSON.parse(options.data);
			if(this.stockType != 0){
				this.stockOut.id = data.flowLocId;
				this.stockOut.name = data.flowLocName;
			}
			this.list.push({name:data.productName,id:data.skuId,count:1,code:[data.qrCode]})
			if(this.stockType == 6){
				this.findSenderInfo();
			}else{
				this.findStock();
			}
		},
		methods:{
			//查询配送员信息
			findSenderInfo(){
				this.$API.getSenderInfo({}).then(res=>{
					this.stockIn.id = res.user.userId;
					this.stockIn.name = res.user.realName;
				});
			},
			findStock(){ 
				const tenantId = uni.getStorageSync('tenantId');
				this.$API.findWarehouseList({page:1,limit:999,tenantId:tenantId}).then(res=>{
					this.stockList = res.page.list;
				});
			},
			findProductList(){
				this.$API.findLpgsku({}).then(res=>{
					this.list = res.page.list.map(item=>{
						item['count'] = 0;
						item['code']= [];
						return item
					});
					if(this.currData){
						this.refreshScanCodes(this.currData);
					}
				});
			},
			//提交
			onSubmit(){
				let that = this;
				if(!this.stockIn.id){
					uni.showToast({
						title:'入库方不能为空！',
						icon:'error'
					});
					return;
				}
				let plist = that.list.filter(item=>{return item.code.length >0}).map(item=>{
								return {productId:item.id,planSingle:item.code.length,actSingleNum:item.code.length,qrCodeList:item.code}
				});
				if(plist.length == 0){
					uni.showToast({
						title:'请扫入库瓶码！',
						icon:'error'
					});
					return ;
				}
				let method = '';
				if(this.stockType == 6){//配送员出库,
					method = 'outStockUpload';
				}else{
					method = 'inStockUpload';
				}
				uni.showModal({
					title: '',
					content: '是否确认上传?',
					cancelText: '取消',
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							const params = {stockType:that.stockType,pdList:plist};
							if(that.stockOut.id){
								params['sourceType'] = that.stockType == 7 ?'SENDER':'WAREHOUSE';
								params['source'] = that.stockOut.id;
							}			
							if(that.stockIn.id){
								params['targetType'] = that.stockType == 6 ?'SENDER':'WAREHOUSE';
								params['target'] = that.stockIn.id;
							}								
							that.$API[method](params).then(res=>{
								const total = res.data.subActSingleNum;
								let list = res.data.list.map(item=>{
									item['code'] = item.codeDetails.map(citem=>{
										return citem.qrCode;
									});
									return item;
								});
								// uni.showToast({title:'操作成功!'});
								uni.navigateTo({
									url:'./succ?type=1&list='+ JSON.stringify(list)+'&total='+total
								})
							});
						}
					}});
			},
			pickstart() {
				this.isMoving = true;
			},
			pickend() {
				this.isMoving = false;
			},
			/**
			 * 确定选择
			 * @param {Object} type
			 */
			sure(type){
				if (this.isMoving) {
						console.log('运动中，不能点击哦')
						return;
				}
				if(type==1){
						let data = this.popList[this.popIndex];
						if(this.dialogType == 1){
							this.stockOut.name = data.name;
							this.stockOut.id = data.id;
						}
						if(this.dialogType == 2){
							this.stockIn.name = data.name;
							this.stockIn.id = data.id;
						}
				}
				this.$refs.type_popup.close();
			},
			onOpenDialog(type){
				this.dialogType = type;
				this.popList = [...this.stockList];
				this.$refs.type_popup.open();
			},
			//弹框选择
			onDataChange(e){
				this.popIndex = e.detail.value[0];
			},
			onInputChange(){
				if(this.searchInfo){
					this.popList = this.stockList.filter(item =>{return item.name.indexOf(this.searchInfo)!=-1});
				}else{
					this.popList = [...this.stockList];
				}
			},
			//刷新产品瓶码
			onConfirm(data){
				const arr = this.list.filter(item=>{return item.id == data.id});
				if(arr.length > 0){
					arr[0]['code'] = data.code;
					arr[0]['count'] = data.code.length +'瓶';
				}
			},
			//刷新扫码codes
			refreshScanCodes(data){
				const arr = this.list.filter(item=>{return item.id == data.skuId});
				if(arr.length == 0){
					this.list.push({name:data.productName,id:data.skuId,count:1,code:[data.qrCode]})
				}else{
					const product = arr[0];
					if(product.code.indexOf(data.qrCode)== -1){
						product['code'].push(data.qrCode);
						product['count'] = product.code.length +'瓶';
					}else{
						uni.showToast({
							title:'请勿重复扫瓶码！',
							icon:'error'
						});
					}
				}
			},
			//扫一扫
			onScan() {
				const that = this;
				uni.scanCode({
					scanType: ["qrCode"],
					success: (res) => {
						if (res.result) {
							that.$API.stockScanCheck({qrCode:res.result,stockType:that.stockType}).then(obj=>{
								that.refreshScanCodes(obj.data);
							});
						} else {
							console.log('请重新扫描');
							return false;
						}
					},
					fail: (res) => {
						console.log('未识别到二维码');
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.instock-details-page{
	font-family: PingFangSC, PingFang SC;height:100%;padding:20rpx;
	position:relative; background-image: linear-gradient(rgba(249, 195, 115, .3) 10%,#F9F9F9 50%);
	.title{
		font-weight: 600;font-size: 30rpx;color: #333333;position:relative;    padding-left: 30rpx;
		&::after{
			content: '';display: inline-block;  position: absolute;
			width: 10rpx;height: 32rpx;background-image: linear-gradient(#F18858 10%, #E86547 50%);
			left: 8rpx;top: 2px;border-top-left-radius: 7rpx;border-bottom-right-radius: 7rpx;transform: rotate(14deg);
		}
	}
	.instock-info{
		margin:28rpx 0 24rpx;background: #FFFFFF;border-radius: 20rpx;padding: 32rpx 32rpx 0;
		.item{
			padding-bottom:24rpx;padding-right: 20rpx;margin-bottom: 24rpx;
			text:first-child{font-weight: 500;font-size: 28rpx;color: #676767;}
			text:last-child{font-weight: 500;font-size: 28rpx;color: #9B9B9B;}
		}
		.line{border-bottom:1px solid #F7F7F7;}
		 .down-arrow {
				width: 18rpx;height: 18rpx;border-width: 2px 2px 0 0;
				border-color: #9B9B9B;border-style: solid;
				-webkit-transform: matrix(0.51, 0.51, 0.51, -0.51, 5, 1);
				transform: matrix(0.51, 0.51, 0.51, -0.51, 5, 1);position: absolute;
		  }
	}
	.picker-view {width: 750rpx;height: 500rpx;margin-top: 20rpx;}
	.search-con{
		margin: 0 36rpx;padding: 10rpx;background: #f3f3f3;border-radius: 20rpx;
		.input-con{    width: 100%;height: 60rpx;}
	}
	.pop-content{
		background: #fff;border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;border: 1rpx solid #fff;position: relative;
		.header{
			font-size: 28rpx;font-weight: 500;padding: 30rpx;
			view:first-child{color:#666666;}
			view:last-child{color: #2986FF;}
		}
		
		.item {height: 50px;align-items: center;justify-content: center;text-align: center;}
	}
	.upload-bt{
		width: 710rpx;height: 84rpx;line-height: 84rpx;text-align: center;position: absolute;bottom: 256rpx;
		background: linear-gradient( 180deg, #F18858 0%, #E86547 100%);
		border-radius: 16rpx;border: 2rpx solid #E96949;color:#ffffff;
	}
	.continue-add-bt{
		width: 710rpx;height: 84rpx;line-height: 84rpx;text-align: center;border-radius: 16rpx;border: 2rpx solid #E96949;
		font-weight: 500;font-size: 28rpx;color: #E86748;position: absolute;bottom: 148rpx;
	}
}
</style>
